// ========================================================
// 常用工具样式
// ========================================================


// 文字超过指定行。。。显示
@mixin text-ellipsis($line: 1) {
	// $line: number
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

	@if $line > 1 {
        white-space: normal;
		display: -webkit-box;
		-webkit-line-clamp: $line;
  		-webkit-box-orient: vertical;
	}
}

// 文字两端对齐
@mixin text-justify() {
    text-align: justify;

    &:after {
        display: inline-block;
        overflow: hidden;
        width: 100%;
        height: 0;
        content: '';
    }
}

@mixin disabled($opacity: 0.4) {
    cursor: default !important;
    pointer-events: none;
    opacity: $opacity;
}


// 文字对齐方式
@mixin text-align($dir) {
	// $dir: left | right | center | justify
	text-align: $dir !important;
}



/*====================================================
 * retina-border 视网膜屏下 border 生成代码
 *====================================================*/
$retina-pixel-ratio: 2 !default; // 缩放系数

// 设置 retain 屏幕下的 边框颜色
@mixin retina-border-color($color, $type: all, $after: false) {
    $inset: before; @if $after == true { $inset: after; }

    @each $pos in $type {
        @if $pos == all {
            @if $build-rem == true {
                border-color: $color;
            } @else {
                &:#{$inset} {
                    border-color: $color;
                }
            }
        }@else {
            @if $build-rem == true {
                border-#{$pos}-color: $color;
            } @else {
                &:#{$inset} {
                    border-#{$pos}-color: $color;
                }
            }
        }
    }
}

// 设置 retina 屏幕下的 边框大小
@mixin retina-border-width($type, $size: 1px, $after: false) {
    $inset: before; @if $after == true { $inset: after; }

    @each $pos in $type {
        @if $pos == all {
            @if $build-rem == true {
                border-width: $size;
            } @else {
                &:#{$inset} {
                    border-width: $size;
                }
            }
        }@else {
            @if $build-rem == true {
                border-#{$pos}-width: $size;
            } @else {
                &:#{$inset} {
                    border-#{$pos}-width: $size;
                }
            }
        }
    }
}

// 设置 retina 屏幕下 边框圆角
@mixin retina-border-radius($size: 1px, $type: all, $after: false) {
    $inset: before; @if $after == true { $inset: after; }

    @each $pos in $type {
        @if $pos == all {
            border-radius: $size;

            @if $build-rem != 1 {
                &:#{$inset} {
                    border-radius: $size;

                    @media (-webkit-min-device-pixel-ratio: $retina-pixel-ratio),
                    (min-device-pixel-ratio: $retina-pixel-ratio) {
                        border-radius: $size*2;
                    }
                }
            }
        }@else {
            border-radius: $size;

            @if $build-rem != 1 {
                &:#{$inset} {
                    border-#{$pos}-radius: $size;

                    @media (-webkit-min-device-pixel-ratio: $retina-pixel-ratio),
                    (min-device-pixel-ratio: $retina-pixel-ratio) {
                        border-#{$pos}-radius: $size*2;
                    }
                }
            }
        }
    }
}

// retina 屏幕下 视网膜屏幕边框 核心代码
@mixin retina-border-content($color, $radio: $retina-pixel-ratio) {
    @if $build-rem == true {
        border-color: $color;
        border-style: solid;
    } @else {
        z-index: 1;
        content: " ";
        position: absolute;
        border-style: solid;
        border-color: $color;
        border-width: 0;
        width: 100%;
        height: 100%;
        left: 0; top: 0;
        pointer-events: none;

        @media (-webkit-min-device-pixel-ratio: $radio),
                (min-device-pixel-ratio: $radio) {

            left: -50%; top: -50%;
            width: 200%; height: 200%;
            transform: scale(.5, .5);
        }
    }
}

// 修复 retina 屏幕下 border 变宽的问题
@mixin retina-border($type: all, $color: $border-default-color, $after: false) {
	// $type: top | bottom
	// $color: color
    // $after: true | false  插入元素的伪类名 
    
    $inset: before; @if $after == true { $inset: after; }// 

    @include retina-border-content($color, $retina-pixel-ratio);
    
    @if $build-rem == true {
        @each $pos in $type {
            @if $pos == all {
                border-width: 1px;
            }@else {
                border-#{$pos}-width: 1px;
            }
        }
    } @else {
        &:#{$inset} {
            @each $pos in $type {
                @if $pos == all {
                    border-width: 1px;
                }@else {
                    border-#{$pos}-width: 1px;
                }
            }
        }
    }
}

/*====================================================
 *  media 屏幕尺寸自适应
 *====================================================*/
@mixin media-width($min: null, $max: null) {
    @if $min != null and $max != null {
        @media screen and (-webkit-min-device-pixel-ratio: 1) 
            and (min-width: $min) and (max-width: $max),
        screen and (min-device-pixel-ratio: 1) and (min-width: $min)
            and (max-width: $max),

        screen and (-webkit-min-device-pixel-ratio: 2) 
            and (min-width: $min * 2) and (max-width: $max * 2),
        screen and (min-device-pixel-ratio: 2) and (min-width: $min * 2)
            and (max-width: $max * 2) {
            @content;
        }
    } @else if $min != null and $max == null {
        @media screen and (-webkit-min-device-pixel-ratio: 1) 
            and (min-width: $min),
        screen and (min-device-pixel-ratio: 1) and (min-width: $min),

        screen and (-webkit-min-device-pixel-ratio: 2) 
            and (min-width: $min * 2),
        screen and (min-device-pixel-ratio: 2) and (min-width: $min * 2) {
            @content;
        }
    } @else if $max !=null and $min == null {
        @media screen and (-webkit-min-device-pixel-ratio: 1) 
            and (max-width: $max),
        screen and (min-device-pixel-ratio: 1) and (max-width: $max),

        screen and (-webkit-min-device-pixel-ratio: 2) 
            and (max-width: $max * 2),
        screen and (min-device-pixel-ratio: 2) and (max-width: $max * 2) {
            @content;
        }
    }
}

// css3 居中
@mixin vertical-align-center() {
    top: 50%;
    transform: translateY(-50%);
}

// css3 上下左右绝对居中
@mixin absolute-align-center() {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


// Flex布局相关属性设置
@mixin flex-align-center() {
    justify-content: space-around;
    align-items: center;
}